<template>
  <div class="wrap">
    <div class="play">
      <div class="cd">
        <div
          class="songImg ani"
          :style="`animation-play-state:${isPlay ? 'running' : 'paused'}`"
        >
          <img :src="songInfo.al.picUrl" />
        </div>
        <div
          class="needle"
          :style="`transform: rotate(${isPlay ? '0' : '-30'}deg);`"
        ></div>
      </div>
      <div class="lyricWrap">
        <div class="head">
          <h2>{{ songInfo.name }}</h2>
          <div class="songinfo">
            <span>{{ songInfo.alia[0] ? songInfo.alia[0] : '&nbsp' }}</span>
            <span
              >{{ getAllsinger(songInfo.ar) }} - {{ songInfo.al.name }}</span
            >
          </div>
        </div>
        <ul class="lyric" v-show="lyric" ref="lyric">
          <li
            v-for="(item, key) in lyric"
            :key="key"
            :class="key == lyricIndex ? 'active' : ''"
          >
            {{ item }}
          </li>
        </ul>
      </div>
    </div>
    <div class="comment">
      <h5>全部评论({{totalCount}})</h5>
      <ul class="commentList">
        <comment-item
          v-for="item in hotComments"
          :key="item.commentId"
          :id="id"
          :imgUrl="item.user.avatarUrl"
          :userName="item.user.nickname"
          :content="item.content"
          :time="item.time"
          :commentId="item.commentId"
          :likeCount="item.likedCount"
          :type=0
          :reply="item.beReplied ? item.beReplied : null"
        ></comment-item>
      </ul>
      <h5 ref="newCom">最新评论({{totalCount}})</h5>
      <ul class="commentList">
        <comment-item
          v-for="item in newComments"
          :key="item.commentId"
          :id="id"
          :imgUrl="item.user.avatarUrl"
          :userName="item.user.nickname"
          :content="item.content"
          :time="item.time"
          :commentId="item.commentId"
          :likeCount="item.likedCount"
          :type=0
          :reply="item.beReplied ? item.beReplied : null"
        ></comment-item>
      </ul>
    </div>
    <paging :totalPages="totalPages" :pagingMethod="getMusicComment"></paging>
  </div>
</template>

<script>
import { getHotCommentAPI ,getMusicCommentAPI } from "@/api";
import { mapState } from "vuex";
import CommentItem from "@/components/CommentItem";
import Paging from '@/components/Paging'
export default {
  name: "Play",
  components: {
    CommentItem,Paging
  },
  data() {
    return {
      lyricIndex: 0, //当前是第几秒的歌词
      index: 0, //当前是第几句歌词
      hotComments: [], //热评数组
      newComments:[],  //最新评论数组
      totalCount:0,//评论总数
      totalPages: 0  //总页数
    };
  },
  methods: {
    // 给播放器添加监听事件
    watchAudio() {
      this.audio.addEventListener("timeupdate", () => {
        let curTime = Math.floor(this.audio.currentTime);
        this.index = 0;
        if (this.lyric[curTime] != undefined && this.lyric[curTime] != null) {
          if (this.lyricIndex != curTime) {
            this.lyricIndex = curTime;
            for (let key in this.lyric) {
              if (key == this.lyricIndex) {
                break;
              } else {
                this.index++;
              }
            }
            this.index++;
            let move = 35 * this.index;
            this.$refs.lyric.scrollTo({ behavior: "smooth", top: move });
          }
        }
      });
    },
    // 处理多个歌手
    getAllsinger(arr) {
      let singers = "";
      arr.forEach((item) => {
        singers += item.name;
        singers += "/";
      });
      return singers.slice(0, singers.length - 1);
    },
    // 获取歌曲评论
    async getHotComment() {
      const res = await getHotCommentAPI({ type: 0, id: this.id });
      this.hotComments = res.data.hotComments;
    },
    async getMusicComment(n){
      console.log(n);
      let cursor = null;
      if(n>1) cursor = this.newComments[19].time;
      const res = await getMusicCommentAPI({id:this.id,type:0,sortType:3,pageSize:30,pageNo:n,cursor});
      this.totalCount = res.data.data.totalCount;
      this.newComments = res.data.data.comments;
      this.totalPages = Math.ceil(this.totalCount/30); //设置总页数
      if(n!=1){
        this.main.scrollTo({top:this.$refs.newCom.offsetTop-60});
      }
    },
  },
  computed: {
    ...mapState("play", ["id", "isPlay", "audio", "lyric", "songInfo"]),
    main(){
      return this.$store.state.scroll.main;
    }
  },
  watch: {
    id() {
      this.watchAudio();
      this.getHotComment();
      this.getMusicComment(1);
    },
  },
  mounted() {
    this.watchAudio();
    this.getHotComment();
    this.getMusicComment(1);
  },
};
</script>

<style lang="less" scoped>
.warp {
  width: 95%;
  margin: 0 auto;
}
.play {
  display: flex;
  justify-content: space-between;
  .cd {
    width: 330px;
    height: 460px;
    position: relative;
    .songImg {
      height: 250px;
      width: 250px;
      background: url("./img/bg.png");
      background-size: 100%;
      position: absolute;
      top: 150px;
      left: 57px;
      transition: all 0.1s;
      transform: rotate(0deg);
      img {
        width: 65%;
        height: 65%;
        margin-top: 43px;
        margin-left: 43px;
        border-radius: 50%;
      }
    }
    .needle {
      width: 70px;
      height: 115px;
      transform-origin: left top;
      background: url("./img/needle-ab.png") no-repeat;
      background-size: contain;
      z-index: 5;
      position: absolute;
      top: 88px;
      left: 170px;
      transition: all 0.3s;
      transform: rotate(-30deg);
    }
  }
  .lyricWrap {
    margin-top: 20px;
    width: 360px;
    margin-right: 80px;
    color: #999;
    .head {
      h2 {
        margin: 0;
        font-weight: normal;
        text-align: center;
        color: black;
      }
      .songinfo {
        span {
          width: 250px;
          display: block;
          font-size: 14px;
          text-align: center;
          margin: 5px auto 0 auto;
          word-wrap: break-word; /*强制换行*/
          overflow: hidden; /*超出隐藏*/
          text-overflow: ellipsis; /*隐藏后添加省略号*/
          white-space: nowrap; /*强制不换行*/
        }
      }
    }
    .lyric {
      width: 350px;
      height: 30px;
      padding-top: 160px;
      padding-bottom: 160px;
      margin: 10px auto 0;
      scrollbar-color: rgba(0, 0, 0, 0.2);
      scrollbar-width:thin;
      overflow-y: auto;
      overflow-x: hidden;
      li {
        color: #666;
        height: 35px;
        text-align: center;
        font-size: 14px;
        font-weight: normal;
        word-break: break-all;
      }
      .active {
        color: black;
        font-size: 16px;
        height: 50px;
        // line-height: 40px;
        font-weight: bold;
        margin-top: 10px;
        word-break: break-all;
      }
    }
  }
}
.comment {
  width: 600px;
  margin: 30px auto;
  h5 {
    margin-left: 18px;
    color: #444;
  }
  .commentList {
    width: 95%;
    margin: 0 auto;
  }
}

.ani {
  animation: turn 50s linear infinite;
}
@keyframes turn {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
</style>